<template>
    <el-skeleton :loading="loading" animated :rows="10" style="width: 100%">
        <template #default>
            <el-empty v-if="!positionDetail && !loading" description="请选择一个职位查看详情"></el-empty>

            <template v-if="positionDetail">
                <!-- 顶部信息区 -->
                <el-row class="detail-header">
                    <el-col :span="18" class="left-info">
                        <el-text tag="h2" class="position-title">{{ positionDetail.title }}</el-text>
                        <el-space wrap alignment="center" class="position-meta">
                            <el-text type="danger" class="salary">{{ positionDetail.salary }}</el-text>
                            <el-divider direction="vertical" />
                            <el-space alignment="center" :size="4">
                                <el-icon><Location /></el-icon>
                                <span>{{ positionDetail.location }}</span>
                            </el-space>
                            <el-divider direction="vertical" />
                            <el-space alignment="center" :size="4">
                                <el-icon><User /></el-icon>
                                <span>{{ positionDetail.experience }}</span>
                            </el-space>
                            <el-divider direction="vertical" />
                            <el-space alignment="center" :size="4">
                                <el-icon><Reading /></el-icon>
                                <span>{{ positionDetail.education }}</span>
                            </el-space>
                        </el-space>
                    </el-col>
                    <el-col :span="6" class="right-actions">
                        <el-space>
                            <el-button
                                :icon="Star"
                                circle
                                @click="toggleCollect"
                                :class="{ 'is-collected': isCollected }"
                            ></el-button>
                            <el-button type="primary">立即沟通</el-button>
                        </el-space>
                    </el-col>
                </el-row>

                <!-- 职位标签 -->
                <el-space wrap class="position-tags">
                    <el-tag v-for="(tag, index) in positionDetail.tags" :key="index" class="tag-item" effect="plain">
                        {{ tag }}
                    </el-tag>
                </el-space>

                <!-- 职位描述 -->
                <el-card shadow="never" class="detail-section">
                    <template #header>
                        <el-text tag="h3" class="section-title">职位描述</el-text>
                    </template>
                    <el-space wrap class="position-description">
                        <el-tag
                            v-for="(tag, index) in positionDetail.description"
                            :key="'desc-' + index"
                            class="description-tag"
                            effect="plain"
                        >
                            {{ tag }}
                        </el-tag>
                    </el-space>
                </el-card>

                <!-- 职责描述 -->
                <el-card shadow="never" class="detail-section">
                    <template #header>
                        <el-text tag="h3" class="section-title">职责描述</el-text>
                    </template>
                    <el-space direction="vertical" alignment="start" :size="8" class="section-content">
                        <el-text
                            v-for="(duty, index) in positionDetail.duties"
                            :key="'duty-' + index"
                            class="content-item"
                        >
                            {{ index + 1 }}. {{ duty }}
                        </el-text>
                    </el-space>
                </el-card>

                <!-- 任职要求 -->
                <el-card shadow="never" class="detail-section">
                    <template #header>
                        <el-text tag="h3" class="section-title">任职要求</el-text>
                    </template>
                    <el-space direction="vertical" alignment="start" :size="8" class="section-content">
                        <el-text
                            v-for="(requirement, index) in positionDetail.requirements"
                            :key="'req-' + index"
                            class="content-item"
                        >
                            {{ index + 1 }}. {{ requirement }}
                        </el-text>
                    </el-space>
                </el-card>

                <!-- 工作地址 -->
                <el-card shadow="never" class="detail-section">
                    <template #header>
                        <el-text tag="h3" class="section-title">工作地址</el-text>
                    </template>
                    <el-text class="section-content">{{ positionDetail.address }}</el-text>
                </el-card>

                <!-- 公司信息 -->
                <el-card shadow="never" class="company-info-section">
                    <el-row align="middle" class="company-header">
                        <el-col :span="4">
                            <el-avatar :size="60" :src="positionDetail.companyLogo"></el-avatar>
                        </el-col>
                        <el-col :span="20" class="company-meta">
                            <el-text tag="h3" class="company-name" @click="goToCompanyInfo">{{
                                positionDetail.companyName
                            }}</el-text>
                            <el-text class="company-desc">
                                {{ positionDetail.companyIndustry }} · {{ positionDetail.companySize }} ·
                                {{ positionDetail.companyStatus }}
                            </el-text>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 查看更多按钮 -->
                <el-row justify="center" class="more-actions">
                    <el-button type="primary" plain @click="goToPositionInfoPage">查看更多信息</el-button>
                </el-row>
            </template>
        </template>
    </el-skeleton>
</template>

<script setup>
import { ref, computed } from "vue";
// 导入图标工具
import { Location, User, Reading, Star } from "@/utils/icons.js";
import { useRouter } from "vue-router";

const props = defineProps({
    positionId: {
        type: String,
        default: "",
    },
});

const router = useRouter();
const loading = ref(false);
const isCollected = ref(false);

// 模拟职位详情数据
const positionDetail = computed(() => {
    if (!props.positionId) return null;

    // 根据职位ID返回不同的数据
    if (props.positionId === "1") {
        return {
            id: props.positionId,
            title: "前端开发工程师",
            salary: "5-6K",
            location: "天津 西青区 保税区",
            experience: "经验不限",
            education: "学历不限",
            tags: ["Vue", "uniapp", "Flutter", "React"],
            description: ["JavaScript", "Vue", "uniapp", "Flutter", "React"],
            duties: [
                "熟悉HTML5和CSS3特性",
                "熟悉使用flex布局、移动端适配、响应式布局",
                "熟悉使用less和sass进行css预编译",
                "熟悉使用JavaScript，包括ES6新增语法",
                "熟悉使用jQuery和ajax与后端交互，进行项目开发",
                "熟悉使用Vue、vue-router、Vuex、Axios Animate开发，能够独立搭建vue-cli的前端框架",
                "熟悉使用Element-ui、Layui、vant等UI框架",
                "熟悉使用apifox、postman调试接口",
                "熟悉使用git、svn等代码管理工具",
                "熟悉使用uni-app及微信小程序工具，搭建小程序项目",
                "熟悉使用Echarts等数据可视化工具",
                "较强的逻辑思维能力，热爱互联网，可以迅速融入团队，并有较强的沟通能力",
            ],
            requirements: [
                "3年以上前端开发经验，熟练掌握HTML、CSS、JavaScript",
                "精通Vue或React框架，有实际的项目经验",
                "熟悉TypeScript，了解前端工程化和模块化开发",
                "熟悉Webpack、Vite等构建工具的配置和优化",
                "有良好的代码风格，注重代码质量和性能优化",
                "有良好的沟通能力和团队协作精神",
            ],
            address: "天津市西青区保税区内",
            companyName: "中科联核",
            companyLogo:
                "https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_100,limit_0",
            companyIndustry: "互联网",
            companySize: "100-499人",
            companyStatus: "未融资",
            companyId: "1",
        };
    } else if (props.positionId === "2") {
        return {
            id: props.positionId,
            title: "前端开发工程师",
            salary: "8-12K",
            location: "天津 滨海新区 开发区",
            experience: "1-3年",
            education: "本科",
            tags: ["Vue", "React", "JavaScript"],
            description: ["JavaScript", "Vue", "React"],
            duties: [
                "负责公司产品的前端开发工作",
                "参与产品需求分析，提供技术解决方案",
                "优化前端性能，提升用户体验",
                "与后端开发团队协作，共同完成产品功能开发",
            ],
            requirements: [
                "1-3年前端开发经验，熟练掌握HTML、CSS、JavaScript",
                "熟悉Vue或React框架，有实际的项目经验",
                "了解前端工程化和模块化开发",
                "有良好的代码风格，注重代码质量和性能优化",
                "有良好的沟通能力和团队协作精神",
            ],
            address: "天津市滨海新区开发区内",
            companyName: "中科联信",
            companyLogo:
                "https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_100,limit_0",
            companyIndustry: "互联网",
            companySize: "100-499人",
            companyStatus: "A轮",
            companyId: "2",
        };
    } else if (props.positionId) {
        return {
            id: props.positionId,
            title: "高级职位示例",
            salary: "15K-25K",
            location: "上海",
            experience: "3-5年",
            education: "本科",
            tags: ["Vue", "React", "TypeScript", "Webpack", "前端架构"],
            description: ["JavaScript", "Vue", "React", "TypeScript", "Webpack"],
            duties: ["负责公司核心产品的前端开发工作"],
            requirements: ["3年以上相关开发经验"],
            address: "上海市浦东新区张江高科技园区科苑路88号",
            companyName: "某科技有限公司",
            companyLogo:
                "https://img.bosszhipin.com/beijin/mcs/banner/71f4ee09b9a2abfb675b5c705fc46c9dcfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_100,limit_0",
            companyIndustry: "互联网科技",
            companySize: "500-999人",
            companyStatus: "B轮",
            companyId: "3",
        };
    }
    return null;
});

// 收藏/取消收藏
const toggleCollect = () => {
    isCollected.value = !isCollected.value;
};

// 跳转到公司详情页
const goToCompanyInfo = () => {
    if (positionDetail.value && positionDetail.value.companyId) {
        router.push({
            path: "/companyInfo",
            query: { id: positionDetail.value.companyId },
        });
    }
};

// 跳转到职位详情页
const goToPositionInfoPage = () => {
    if (positionDetail.value && positionDetail.value.id) {
        router.push({
            path: "/jobInfo",
            query: { id: positionDetail.value.id },
        });
    }
};
</script>

<style scoped>
:deep(.el-card) {
    --el-card-padding: 10px;
    --el-card-border-color: #ebeef5;
}

:deep(.el-card__header) {
    padding: 10px;
    border-bottom: none;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.left-info {
    flex: 1;
}

.position-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 15px 0;
    display: block;
}

.position-meta {
    color: #606266;
    font-size: 14px;
}

.salary {
    font-weight: 500;
}

.right-actions {
    display: flex;
    justify-content: flex-end;
}

.is-collected {
    color: #f56c6c;
    background-color: #fef0f0;
    border-color: #fbc4c4;
}

.position-tags {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.detail-section {
    margin-bottom: 20px;
    border: none;
    box-shadow: none;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin: 0;
}

.section-content {
    color: #606266;
    line-height: 1.8;
}

.position-description {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.description-tag {
    background-color: #f5f7fa;
    color: #606266;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 14px;
}

.company-info-section {
    margin-bottom: 20px;
    border: none;
    box-shadow: none;
}

.company-header {
    display: flex;
    align-items: center;
}

.company-meta {
    padding-left: 15px;
}

.company-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin: 0 0 8px 0;
    display: block;
    cursor: pointer;
}

.company-name:hover {
    color: #409eff;
    text-decoration: underline;
}

.company-desc {
    font-size: 14px;
    color: #909399;
}

.more-actions {
    margin-top: 30px;
}
</style>
